<template>
	<view class="login">
		<view class="logo-box">
			<image :src="logo" mode="widthFix" class="logo"></image>
			<view v-if="name">{{ name }}</view>
		</view>

		<view class="form">
			<view class="input"><input type="text" placeholder="请输入账号" v-model="reg_info.account" /></view>
			<view class="input" style="position: relative;">
				<input :type="psd_type" placeholder="请输入密码" v-model="reg_info.password" style="border: none; outline: none;font-size: 32rpx;" />
				<view class="show-psw" @tap="togPsd" style="position: absolute;right: 20rpx;">
					<image :src="!showPsw ? '../../static/eyeclose.png' : '../../static/eyeopen.png'" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="input" style="position: relative;">
				<input :type="psd_type2" placeholder="请再次输入密码" v-model="reg_info.twice" style="border: none; outline: none;font-size: 32rpx;padding: 0;" />
				<view class="show-psw" @tap="togPsdTwice" style="position: absolute;right: 20rpx;">
					<image :src="!showPswTwice ? '../../static/eyeclose.png' : '../../static/eyeopen.png'" mode="widthFix"></image>
				</view>
			</view>
			<view class="input" style="position: relative;">
				<input type="text" placeholder="请输入邮箱" v-model="reg_info.email" style="border: none; outline: none;font-size: 32rpx;padding: 0;" />
			</view>
			<view class="btn" @click="regCheck">注册</view>
		</view>
		<view class="footer">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//logo、name这两个属性是为了避免提示错误暂时留着的，后边优化时处理掉
				logo: '',
				name: '',
				u_info: {},
				showPsw: false,
				showPswTwice: false,
				psd_type: 'password',
				psd_type2: 'password',
				reg_info: {
					account: '',
					password: '',
					twice: '',
					email: ''
				},

			};
		},
		methods: {
			togPsd() {
				this.showPsw = !this.showPsw;
				if (this.showPsw) {
					this.psd_type = 'text';
				} else {
					this.psd_type = 'password';
				}
			},
			togPsdTwice() {
				this.showPswTwice = !this.showPswTwice;
				if (this.showPswTwice) {
					this.psd_type2 = 'text';
				} else {
					this.psd_type2 = 'password';
				}
			},

			regCheck() {
				if (!this.reg_info.account || !this.reg_info.password) {
					uni.showToast({
						title: '账号或密码为空',
						icon: 'none'
					});
					return;
				}
				if (!this.reg_info.twice) {
					uni.showToast({
						title: '请再次输入密码',
						icon: 'none'
					});
					return;
				}
				if (this.reg_info.twice != this.reg_info.password) {
					uni.showToast({
						title: '两次输入的密码不同',
						icon: 'none'
					});
					return;
				}
				if (!this.reg_info.email) {
					uni.showToast({
						title: '邮箱不能为空',
						icon: 'none'
					});
					return;
				}
				// 在 Reg 方法中添加邮箱格式验证
				const emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if (!emailReg.test(this.reg_info.email)) {
					uni.showToast({
						title: '邮箱格式不正确',
						icon: 'none'
					});
					return;
				}
				this.register()
			},
			async register() {
				try {
					const res = await this.$myRequest({ // 修正拼写
						method: 'POST',
						url: '/api/user/register',
						data: {
							username: this.reg_info.account,
							password: this.reg_info.password,
							email: this.reg_info.email
						}
					});
					if (res.data.code === 200) {
						uni.showToast({
							title: '注册成功',
							icon: 'success',
							duration: 1500,
							success: setTimeout(() => {
								uni.navigateBack();
							}, 1500)
						});
						// 清空表单并切换模式
						this.reg_info = {
							account: '',
							password: '',
							twice: '',
							email: ''
						};

					} else {
						// console.log(res)
						uni.showToast({
							title: res.data.message || '注册失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '请求异常，请重试',
						icon: 'none'
					});
					console.error('注册请求异常:', error);
				}
			},
		}
	};
</script>

<style>
	uni-input {
		margin-left: 0 !important;
	}

	.login {
		.logo-box {
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 50rpx 0;

			.logo {
				width: 300rpx;
			}

			view {
				font-size: 40rpx;
				font-weight: 600;
			}
		}

		.form {
			padding: 0 80rpx;

			.input {
				display: flex;
				align-items: center;
				border-bottom: 1px solid rgba(221, 221, 221, 1);
				padding-bottom: 20rpx;
				margin-bottom: 35rpx;
				font-size: 32rpx;

				image {
					width: 35rpx;
				}

				input {
					flex: 1;
					margin-left: 20rpx;
				}
			}

			.psd {
				justify-content: space-between;
				margin-bottom: 20rpx;
			}

			.reg-for {
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 50rpx;

				.reg {
					color: #1890FF;
				}
			}

			.btn {
				color: RGBA(255, 255, 255, 1);
				background-color: #31cc4b;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				font-size: 36rpx;

			}
		}

		.footer {
			position: absolute;
			bottom: 0;
			width: 100%;
		}
	}
</style>
